<template>
    <div>
        <div class="header">
            <div class="header-title" v-text="DOMText.title"></div>
            <div class="header-menu">
                <div class="menu-btn">≡</div>
                <router-link :to="{name:item.name}"
                    v-for="(item, index) in DOMText.routerLinks"
                    :key="index"
                    v-text="item.label"
                    class="menu-item"
                ></router-link>
                <router-link :to="{name:getLoginInfo ? 'UserInfo' : 'Login'}"
                    v-text="getLoginInfo ? getLoginInfo.nickname : '登录'"
                    class="menu-item"
                ></router-link>
            </div>
            <div class="header-icon">
                <Icon type="ios-information-circle-outline" @click="drawerOpen=true" />
            </div>
        </div>
        <div class="solid"></div>
        <Drawer title="消息" width="400" v-model="drawerOpen">
          <MessagePart></MessagePart>
        </Drawer>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import MessagePart from './MessagePart'

export default {
  name: "Header",
  components: {
    MessagePart,
  },
  data() {
    return {
      DOMText: {
        title: "IMAU ONLINE JUDGE",
        routerLinks: [
          {
            name: "Home",
            label: "首页"
          },
          {
            name: "ProblemList",
            label: "题库"
          },
          {
            name: "Status",
            label: "状态"
          },
          {
            name: "Ranking",
            label: "排名"
          },
          {
            name: "ContestList",
            label: "竞赛"
          },
          // {
          //   name: "Message",
          //   label: "消息"
          // },
          {
            name: "Help",
            label: "帮助"
          },
          // {
          //   name: "About",
          //   label: "关于"
          // },
        ]
      },
      drawerOpen:false
    };
  },
  computed: {
    ...mapGetters(['getLoginInfo'])
  },
  created(){
  }
};
</script>

<style lang="less" scoped>
.solid {
  height: 45px;
}
.header {
  width: 100%;
  height: 45px;
  line-height: 45px;
  color: #fff;
  background: #2b303b;
  padding: 0 5%;
  display: flex;
  font-size: 1rem;
  position: fixed;
  z-index: 100;
  &-title {
    font-size: 1.2rem;
  }
  &-menu {
    display: flex;
    overflow: hidden;
    .menu-btn {
        display: none;
    }
    .menu-item {
      margin-left: 30px;
      color: #fff;
      &:hover {
        color: #2d8cf0;
      }
    }
  }
  &-icon{
    margin-left: auto;
    font-size: 1.3rem;
    *{
      transition: 0.36s all;
      margin-left: 5px;
      &:hover {
        color: #2d8cf0;
      }
    }
  }
}
@media screen and (max-width: 800px) {
  .header {
    justify-content: space-between;
    padding: 0 0%;
    &-title {
      margin-left: 20px;
    }
    &-menu {
      width: 50px;
      height: 45px;
      background: #2b303b;
      flex-direction: column;
      text-align: center;
      transition: 0.36s all;
      .menu-btn {
        display: inline;
        // height: 45px;
        // width: 100%;
        font-size: 25px;
      }
      .menu-item {
        margin-left: 0;
      }
      &:hover {
        height: 100vh;
        width: 20vh;
        opacity: 0.9;
      }
    }
  }
}
</style>